import React,{
    useState,
    useCallback
} from 'react';
import './index.css';
import {Button} from 'antd';

const Item = (props) => {
    const {value,id,status} = props.data;
    return (
        <div className={'item'}>
            <div>{value}</div>
            <div>
                <Button onClick={props.handleStatus.bind(null,id,status)} className={'m-r-10'} type="primary">{status?'已':'未'}完成</Button>
                <Button className={'m-r-10'}>编辑</Button>
                <Button onClick={props.deleteItem.bind(null,id)} type="dashed">删除</Button>
            </div>
        </div>
    )
}

const Todo = () => {
    let [text,setText] = useState("");
    let [list,setList] = useState([]);
    //处理内容输入
    const handleInputValue = useCallback((e)=>{
        setText(e.target.value);
    },[]);
    //监听键盘事件
    const handleOnKeyDown = useCallback((e)=>{
        if(e.keyCode === 13){
            setList( [{
                value:text,
                id:(Math.random()*10000).toFixed(0),
                status:true
            },...list]);
            setText('');
        }
    },[list, text]);
    //处理 完成事件
    const handleStatus = useCallback((id,status)=>{
        setList(list.map(e => {
            if( e.id === id ) e.status = !status;
            return e;
        }));
    },[list]);
    //删除事件
    const deleteItem = useCallback((id)=>{
        setList(list.filter(e=> e.id !== id));
    },[list]);
    //搜索事件
    const handleSearch = useCallback(()=>{
        setList( text ? list.filter(e=>e.value === text) : list );
    },[text,list]);
    return (
        <div className={'box'}>
            <header className={'header'}>
                <h2 className={'h2'}>我的待办事项：</h2>
                <input
                    value={text}
                    onChange={(e)=>{
                        handleInputValue(e);
                    }}
                    onKeyDown={e=>handleOnKeyDown(e)}
                    className={'input'}
                    type="text"
                />
                <Button onClick={handleSearch} type="primary">搜索</Button>
            </header>
            <div className={'content'}>
                <div className={'title'}>未做：</div>
                {
                    list.filter(e=>e.status).map(e=><Item
                        handleStatus={handleStatus}
                        deleteItem={deleteItem}
                        key={e.id}
                        data={e} />)
                }
            </div>

            <div style={{
                border: 'none'
            }} className={'content'}>
                <div style={{
                    color: 'green'
                }} className={'title'}>已做：
                </div>
                {
                    list.filter(e=>!e.status).map(e=><Item
                        handleStatus={handleStatus}
                        deleteItem={deleteItem}
                        key={e.id}
                        data={e} />)
                }

            </div>
        </div>
    )
}

export default Todo;